<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head></head>
    <body>
        <h1>High Score Server</h1>
        <table>
          <tr>
            <td>Name:</td>
            <td><input type="text" id="input_name" /></td>
          </tr>
          <tr>
            <td>Score:</td>
            <td><input type="text" id="input_score" /></td>
          </tr>          
        </table>
        <div id="div_output" />
        <script type="text/javascript">
            var PostHelper = {};
            
            PostHelper.init = function() {     
              PostHelper.registerInputField("input_name");
              PostHelper.registerInputField("input_score");
              document.getElementById("input_name").focus();
            };			
			
            PostHelper.registerInputField = function(fieldId) {
              var inputField = document.getElementById(fieldId);
              if (!inputField) {
                alert("Did not find input field with id: " + fieldId);
                return;
              }
              inputField.onkeydown = function(evt) {
                if (evt.keyCode == 13) {
                  PostHelper.submitHighScore();
                  inputField.value = "";
                }
              };
            }; 			
      
            PostHelper.submitHighScore = function() {
              PostHelper.send(document.getElementById("input_name").value,
			                  document.getElementById("input_score").value);
            }; 			
            
            PostHelper.display = function(message) {                 
                var p = document.createElement("p");
                p.innerText = message;
                document.getElementById("div_output").appendChild(p);
            };			

            PostHelper.getURL = function(action) {
              return "http://" + window.location.hostname + ":" + window.location.port + "/" + action;
            };			
           
            PostHelper.send = function(name, score) {
              var httpRequest = new XMLHttpRequest();
              httpRequest.onreadystatechange = function() {
                if(httpRequest.readyState == 4) {
                  if (httpRequest.status == 200) {
                    // The response will be a url
                    window.location.href = PostHelper.getURL(httpRequest.responseText);
                  } else {
                    PostHelper.display("POST failed with status: " + httpRequest.status + ".");
                  }
                }
              };
              
			  var url = PostHelper.getURL("hs");
			  PostHelper.display("POST url: " + url);
			  
              var body = "name=" + name + "&score=" + score;
			  PostHelper.display("POST body: " + body);
              
			  httpRequest.open("POST", url, true);
              httpRequest.send(body);
            };   
			
            window.onload = PostHelper.init();
        </script>   
    </body>
</html>
